<template>
    <div>
        <div :style="{ height: pageHeight - 120 + 'px' }" class="aside-left cursor-pointer">
            <div @click="handleSelect(item.id)" v-for=" item in imageList"
                class="item-only flex  justify-between items-center h-12 p-5">
                <div class="text-name text-gray-500 truncate">{{ item.name }}</div>
                <div>
                    <el-icon color="skyblue" class="mr-5">
                        <Edit @click="handleEdit(item)" />
                    </el-icon>
                    <el-icon color="skyblue">
                        <Close @click="handleDelete(item.id)" />
                    </el-icon>
                </div>

            </div>
        </div>
        <div :style="{ height: 60 + 'px' }" class="flex justify-center">
            <el-pagination v-model:currentPage="currentPage" @change="handlePage" @current-change="handleCurrentChange"
                size="small" :total="totalImageNumber" background layout="prev, next" />
        </div>
        <public-drawer size="30%" title="修改" ref="addBtnRef" @submit="handleSubmit">
            <el-form :model="classifyForm" ref="formRef" :rules="rules" label-width="80px" :inline="false"
                size="middle">
                <el-form-item label="分类名称" prop="name">
                    <el-input v-model="classifyForm.name"></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="order">
                    <el-input-number v-model="classifyForm.order" :min="1" @change="handleChange" />
                </el-form-item>
            </el-form>
        </public-drawer>
    </div>
</template>
<script setup>
import publicDrawer from '../../../components/public-drawer.vue';
import { ref, onMounted } from 'vue';
import { getImagePageList } from '../../../api/image';
import { useImageDrawer } from '../../../composables/useDrawer';
import { ElMessage, ElMessageBox } from 'element-plus'
import { updateImageClassify, deleteImageClassify } from '../../../api/image';
let pageHeight = 0;
const imageList = ref([]);
pageHeight = window.innerHeight - 158 || document.body.clientHeight;
const totalImageNumber = ref(0);
const currentPage = ref(1);
let currentId = ref();
let {
    addBtnRef,
    formRef,
    rules,
    classifyForm,
} = useImageDrawer();
/**获取图库列表 */
const getImageLists = (pageNumber) => {
    getImagePageList(pageNumber).then(({ list, totalCount }) => {
        imageList.value = list;
        totalImageNumber.value = totalCount;
    });
}
/**获取当前页码 */
const handleCurrentChange = (e) => {
    currentPage.value = e;
}
const handlePage = (e) => {
    getImageLists(e);
}
/** 点击编辑图标 */
const handleEdit = (item) => {
    console.log('点击了编辑按钮', item.id);
    addBtnRef.value.openDrawer();
    classifyForm.name = item.name;
    classifyForm.order = item.order;
    currentId.value = item.id;
}
/**提交按钮 */
const handleSubmit = () => {
    formRef.value.validate((valid) => {
        console.log('打印valid1', valid);
        if (valid) {
            addBtnRef.value.showLoading();
            updateImageClassify(currentId.value, { name: classifyForm.name, order: classifyForm.order }).then(res => {
                console.log('打印res', res);
                addBtnRef.value.closeDrawer();
                handlePage(currentPage.value);
                addBtnRef.value.hideLoading();
            })

        }
    })
}

/**删除时的二次确认框 */
const handleDelete = (id) => {
    ElMessageBox.confirm(
        '确定要删除吗?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            console.log('打印传入的id', id);
            await deleteImageClassify(id).then(res => {
                handlePage(currentPage.value);
            })
            ElMessage({
                type: 'success',
                message: '删除成功',
            })

        })
        .catch(() => {

        })
}
/**当前选中的列表 */
const handleSelect = (id) => {
    emits('selectId', id);
}

onMounted(() => {
    getImageLists(1);
})
const emits = defineEmits(['selectId'])
</script>
<style scoped lang='scss'>
:deep(.aside-left) {
    overflow-y: scroll;
}

.item-only:hover {
    @apply bg-blue-50;
}
</style>
